<template>
    <div class="container">
        <div class="title">{{ title }}</div>
        <div class="subtitle">{{ subtitle }}</div>
        <input v-model="inputValue" />
        <div>使用keep-alive保留输入值：{{ inputValue }}</div>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: 'Home',
    computed: mapState({
        // 箭头函数可使代码更简练
        title: state => state.title
    }),
    data() {
        return {
            inputValue: '',
            subtitle: '使用webpack5'
        }
    }
}
</script>

<style lang="stylus" scoped>
.container
    height calc(100% - 37px)
    width 100%
    // background-image url('../../assets/img/bg-1.png')
    // background-size cover
    // background-repeat no-repeat
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction column
.title 
    color #333
    font-size 20px
    margin 10px 0
.subtitle
    color #333
    font-size 18px
    margin 10px 0
</style>